<template>
  <!-- 有颜色变化的地图 -->
  <div class="map_container">
    <div
      ref="mapContainer"
      id="mapContainer"
      style="width: 880px; height: 800px"
    ></div>
    <div class="map-border"></div>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
import mapbg from "@/assets/imgs/electricity/mapwenli.png";

export default {
  name: "Sichuan3DMap",
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  setup(props) {
    const mapContainer = ref(null); // DOM 引用
    const chartInstance = ref(null); // 存储 ECharts 实例

    // 获取地图数据
    const getMapData = () =>
      props.data.map((item) => {
        item.name = item.region;
        item.value = item.val;
        return item;
      });
    let mapApiData = getMapData();
    // 扁平化处理
    let flatNumbers = mapApiData.reduce(
      (acc, val) => acc.concat(val.value),
      []
    );
    // 获取最大值
    let max = Math.max(...flatNumbers);
    // 获取最小值
    let min = Math.min(...flatNumbers);
    const acolors = [
      "RGBA(21, 57, 83,1)",
      "RGBA(49, 94, 128,1)",
      "RGBA(81, 138, 181, 1)",
      "RGBA(78, 133, 175, 1)",
      "RGBA(104, 168, 217,1)",
      "RGBA(126, 298, 254, 1)",
    ];
    mapApiData.map((item) => {
      let c = "";
      if (item.value <= min) {
        c = acolors[0];
      } else if (item.value > min && item.value <= min + (max - min) / 4) {
        c = acolors[1];
      } else if (
        item.value > min + (max - min) / 4 &&
        item.value <= min + (max - min) / 2
      ) {
        c = acolors[2];
      } else if (
        item.value > min + (max - min) / 2 &&
        item.value <= min + ((max - min) * 3) / 4
      ) {
        c = acolors[3];
      } else if (
        item.value > min + ((max - min) * 3) / 4 &&
        item.value <= max
      ) {
        c = acolors[4];
      } else {
        c = acolors[5];
      }
      item.itemStyle = {
        areaColor: c,
        borderColor: "#fff",
        borderWidth: 1,
      };
    });
    var aspectScale = 0.8;
    const shadowLayer = {
      // 阴影层
      id: "shadowLayer",
      map: "sichuan",
      zlevel: 7,
      silent: true,
      aspectScale: aspectScale,
      itemStyle: {
        areaColor: "rgba(0,0,0,0)",
        borderColor: "#fff",
        borderWidth: 1,
      },
    };
    const shadowLayer2 = {
      // 阴影层
      id: "shadowLayer2",
      map: "sichuan",
      zlevel: 6,
      silent: true,
      aspectScale: aspectScale,
      itemStyle: {
        areaColor: "rgba(0,0,0,0)",
        borderColor: "#5493B0",
        borderWidth: 6,
        shadowBlur: 2,
        shadowColor: "#5493B0",
        shadowOffsetX: 1,
        shadowOffsetY: 4,
      },
    };
    const shadowLayer3 = {
      // 阴影层
      id: "shadowLayer3",
      map: "sichuan",
      zlevel: 5,
      silent: true,
      aspectScale: aspectScale,
      itemStyle: {
        areaColor: "rgba(0,0,0,0)",
        borderColor: "#122F49",
        borderWidth: 6,
        shadowBlur: 2,
        shadowColor: "#122F49",
        shadowOffsetX: 1,
        shadowOffsetY: 8,
      },
    };

    const shadowLayer4 = {
      // 阴影层
      id: "shadowLayer4",
      map: "sichuan",
      zlevel: 4,
      silent: true,
      aspectScale: aspectScale,
      itemStyle: {
        areaColor: "rgba(0,0,0,0)",
        borderColor: "#122F49",
        borderWidth: 6,
        shadowBlur: 2,
        shadowColor: "#122F49",
        shadowOffsetX: 1,
        shadowOffsetY: 12,
      },
    };
    const shadowLayer5 = {
      // 阴影层
      id: "shadowLayer5",
      map: "sichuan",
      zlevel: 3,
      silent: true,
      aspectScale: aspectScale,
      itemStyle: {
        areaColor: "rgba(0,0,0,0)",
        borderColor: "#122F49",
        borderWidth: 6,
        shadowBlur: 2,
        shadowColor: "#122F49",
        shadowOffsetX: 1,
        shadowOffsetY: 16,
      },
    };

    // 加载地图
    const loadMap = async () => {
      let baseStr = "";
      console.log(import.meta.env.MODE, "===");
      if (import.meta.env.MODE == "development") {
        baseStr = "";
      } else {
        baseStr = "/scdtyz";
      }
      const response = await fetch(baseStr + "/sichuan.json");
      if (!response.ok) {
        console.error("地图数据加载失败", response.statusText);
        return;
      }
      const mapData = await response.json();
      echarts.registerMap("sichuan", mapData);
      chartInstance.value = echarts.init(mapContainer.value);

      const option = {
        tooltip: {
          show: false,
        },
        visualMap: {
          type: "continuous",
          min: min,
          max: max,
          orient: "vertical", // 设置为垂直方向
          left: "10%",
          bottom: "10%",
          calculable: true, //是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
          textStyle: {
            color: "#fff", // 文本颜色
          },
          formatter: function (value) {
            if (value === max) {
              return "高";
            } else if (value === min) {
              return "低";
            } else {
              return value.toFixed(2);
            }
          },
          inRange: {
            color: ["#173C57", "#7EC5FD"],
          },
          outOfRange: {
            color: "#7CDAFF", // 数据超出范围的颜色
          },
        },
        // geo: [
        //   shadowLayer,
        //   shadowLayer2,
        //   shadowLayer3,
        //   shadowLayer4,
        //   shadowLayer5,
        //   {
        //     id: "textureLayer",
        //     show: true,
        //     map: "sichuan",
        //     itemStyle: {
        //       areaColor: {
        //         image: mapbg, // 支持 base64、网络路径
        //         repeat: "repeat", // 自动平铺填充区域
        //       },
        //       borderColor: "#122F49", // 边框颜色
        //       borderWidth: 1, // 边框宽度
        //     },
        //     zlevel: 8,
        //     aspectScale: aspectScale, // 调整比例
        //   },
        //   {
        //     id: "highlightLayer",
        //     show: true,
        //     map: "sichuan",
        //     zlevel: 9,
        //     label: {
        //       show: false,
        //       fontSize: 14,
        //       color: "#fff",
        //       fontFamily: "苹方中等",
        //     },
        //     itemStyle: {
        //       areaColor: "rgba(255,255,255,0)", // 初始透明
        //       borderColor: "rgba(0,0,0,0)",
        //     },
        //     emphasis: {
        //       disabled: true,
        //     },
        //     aspectScale: aspectScale,
        //   },
        // ],
        series: [
          {
            name: "四川",
            type: "map",
            map: "sichuan",
            coordinateSystem: "geo", // 绑定到 3D 地理坐标系
            zlevel: 10,
            roam: false,
            label: {
              show: true,
              color: "#fff",
            },
            emphasis: {
              label: {
                color: "#fff",
              },
              itemStyle: {
                areaColor: "rgba(86, 210, 255, 1)", // 鼠标移上去时的区域颜色
              },
            },
            itemStyle: {
              areaColor: "RGBA(95, 156, 203, 0.1)",
              borderColor: "#fff",
              borderWidth: 1,
            },
            data: mapApiData,
            aspectScale: 0.85,
            // 点击地图区域的样式
            select: {
              disabled: true,
            },
          },
        ],
      };

      chartInstance.value.setOption(option);
      chartInstance.value.resize();
    };

    onMounted(() => {
      loadMap();
      window.addEventListener(
        "resize",
        () => chartInstance.value && chartInstance.value.resize()
      );
    });

    onUnmounted(() => {
      // 清除事件监听器
      window.removeEventListener("resize", chartInstance.value.resize());
    });

    return {
      mapContainer,
    };
  },
};
</script>

<style lang="scss" scoped>
.map_container {
  position: relative;
  left: 4%;
  top: -60px;

  #mapContainer {
    position: absolute;
    z-index: 9;
    background: url("../../../assets/imgs/electricity/map-bg.png") no-repeat
      center;
  }

}
  .map-border {
    width: 826px;
    height: 734px;
    position: absolute;
    z-index: 8;
    top: 45px;
    left: 30px;
    background: url("../../../assets/imgs/electricity/mapwenli.png") no-repeat
      center;
    transform: scale(0.98);
  }

#mapContainer {
  width: 100%;
  height: 100%;
}

::v-deep .map-hover-box {
  background: url("../../../assets/imgs/k.png") no-repeat center;
  width: 383px;
  height: 85px;
  display: flex;
  flex-direction: row;

  .map-hover-mov {
    width: 26%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    h3 {
      margin: 0;
      padding-top: 6px;
      font-size: 16px;
      font-family: "优设标题";
      letter-spacing: 1px;
      background: linear-gradient(
        to bottom,
        #ffffff 0.68%,
        #d1fffc 50%,
        #b1fffa 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      word-wrap: break-word;
      overflow-wrap: break-word;
      white-space: normal;
      text-align: center;
      display: inline-block;
    }
  }

  .map-hover-tips {
    width: 74%;
    font-family: "MiSans-Medium";
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;

    p {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    p:nth-child(1),
    p:nth-child(2) {
      width: 30%;
    }

    p:nth-child(3) {
      width: 40%;
    }

    p:nth-child(2) {
      border: 0.8px dashed;
      border-image-slice: 1;
      border-image-source: linear-gradient(
        0deg,
        rgba(104, 255, 245, 0) 0%,
        #68fff5 50%,
        rgba(104, 255, 245, 0) 100%
      );
    }

    span:nth-child(1) {
      font-size: 14px;
      font-weight: 330;
      color: #fff;
    }

    span:nth-child(2) {
      font-size: 16px;
      font-weight: 520;
      color: #68fff5;
      margin-top: 5px;
    }
  }
}
</style>
